<template>
  <view class="my-apply-container px-[30rpx] py-[20rpx] box-border">
    <view
      class="case-list-item mt-[20rpx] px-[20rpx] py-[20rpx] box-border module-part"
      v-for="(item, index) in list"
      :key="index"
    >
      <view
        class="serial-id flex flex-row items-center justify-between mb-[20rpx]"
      >
        <view class="flex items-start text-[#222222] text-[32rpx]">
          <view class="whitespace-nowrap">案件编号：</view>
          <view
            class="grow max-w-full overflow-hidden text-ellipsis line-clamp-1"
            >{{ item.serialId }}</view
          >
        </view>
        <view
          class="text-[24rpx] whitespace-nowrap ml-[10rpx]"
          :style="
            item.status == 0
              ? 'color: #1E92F0;'
              : item.status == 1
              ? 'color: #FF6A2A;'
              : item.status == 2
              ? 'color: #00B578;'
              : ''
          "
          >{{
            item.status == 0
              ? "已排期"
              : item.status == 1
              ? "审核中"
              : item.status == 2
              ? "已完结"
              : ""
          }}</view
        >
      </view>
      <view class="text-[#666666] text-[28rpx]">
        <view class="flex items-start gap-[10rpx]">
          <view class="whitespace-nowrap">立案案由：</view>
          <view
            class="grow max-w-full overflow-hidden text-ellipsis line-clamp-2"
            >{{ item.casePoints }}</view
          >
        </view>
        <view class="desc-list">
          <view class="title">立案类型：</view>
          <view class="max-w-full overflow-hidden text-ellipsis line-clamp-1">{{
            item.type
          }}</view>
        </view>
        <view class="desc-list">
          <view class="title">立案人：</view>
          <view>{{ item.draftsman }}</view>
        </view>
        <view class="desc-list">
          <view class="title">立案日期：</view>
          <view>{{ item.time }}</view>
        </view>
      </view>
    </view>
    <!-- 加载状态 -->
    <uni-load-more
      :status="loadStatus"
      :content-text="{
        contentdown: '上拉加载更多',
        contentrefresh: '正在加载...',
        contentnomore: '没有更多了',
      }"
    />
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { onReachBottom, onPullDownRefresh } from "@dcloudio/uni-app";

// 响应式数据
const list = reactive([
  {
    serialId: "(2024)渝0107民初3636号",
    casePoints:
      "民间借贷纠纷民间借贷纠纷民间借贷纠纷民间借贷纠纷民间借贷纠纷民间借贷纠纷",
    type: "民事",
    draftsman: "黛玉",
    time: "2025-03-05",
    status: 0, // 0 已排期 1 审核中 2已完结
  },
  {
    serialId: "(2024)渝0107民初3636号",
    casePoints: "民间借贷纠纷",
    type: "民事",
    draftsman: "黛玉",
    time: "2025-03-05",
    status: 1, // 0 已排期 1 审核中 2已完结
  },
  {
    serialId: "(2024)渝0107民初3636号",
    casePoints: "民间借贷纠纷",
    type: "民事",
    draftsman: "黛玉",
    time: "2025-03-05",
    status: 2, // 0 已排期 1 审核中 2已完结
  },
]);
const currentPage = ref(1);
const total = ref(0);
const loadStatus = ref("more"); // more|loading|noMore
const pageSize = 10;

// 初始化加载
onMounted(() => {
  fetchData();
});

// 上拉加载更多
onReachBottom(() => {
  if (loadStatus.value === "more") {
    currentPage.value++;
    fetchData();
  }
});

// 下拉刷新
onPullDownRefresh(async () => {
  currentPage.value = 1;
  list.value = [];
  await fetchData(true);
  uni.stopPullDownRefresh();
});

// 请求数据
const fetchData = async (isRefresh = false) => {
  if (loadStatus.value === "loading") return;

  loadStatus.value = "loading";

  try {
    // 模拟API请求
    const res = await uni.request({
      url: "/api/list",
      method: "GET",
      data: {
        page: currentPage.value,
        pageSize,
      },
    });

    // 更新数据
    total.value = res.total;
    list.value = [...list.value, ...res.data];

    // 更新加载状态
    loadStatus.value = list.value.length >= total.value ? "noMore" : "more";
  } catch (error) {
    // 错误处理
    currentPage.value = Math.max(1, currentPage.value - 1);
    loadStatus.value = "more";
    uni.showToast({
      title: "加载失败",
      icon: "none",
    });
  }
};

const scanNewsDetail = () => {
  uni.navigateTo({
    url: "/subPages/news/detail?id=1",
  });
};
</script>

<style lang="scss" scoped>
.my-apply-container {
  .case-list-item {
    .desc-list {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-top: 10rpx;
      .title {
        white-space: nowrap;
      }
    }
  }

  .case-list-item:first-child {
    margin-top: 0;
  }
}
</style>
